<template>
  <div>
    <div>
        <el-row :gutter="12">
  <el-col :span="8">
    <el-card  shadow="hover">
      <div style="display:flex;flex-direction: column; width: 100%; height: 50vh; ">
         <el-tag style="width: 100%;"  class="el-icon-coin"  effect="dark" >今日信息</el-tag>
         
        <div style="font-size: small;">
           今日预约人数：<span>{{ data.todayBookingNumber }}</span>
           <el-divider></el-divider>
        </div>

        <div style="font-size: small;">
           今日评估人数：<span>{{ data.todayPgNumber }}</span>
           <el-divider></el-divider>
        </div>

      </div>
    </el-card>
  </el-col>
  <el-col :span="8">
    <el-card shadow="hover">
        <div style="display:flex;flex-direction: column; width: 100%; height: 50vh; ">
         <el-tag style="width: 100%;" class="el-icon-s-grid"   effect="dark" >汇总</el-tag>
         
        <div style="font-size: small;">
           预约人数：<span>{{ data.bookingSum }}</span>
           <el-divider></el-divider>
        </div>

        <div style="font-size: small;">
           评估人数：<span>{{ data.pgSum }}</span>
           <el-divider></el-divider>
        </div>
    
      </div>
    </el-card>
  </el-col>
  <el-col :span="8">
    <el-card shadow="hover">
        <div style="display:flex;flex-direction: column; width: 100%; height: 50vh; ">
         <el-tag style="width: 100%;"  class="el-icon-user-solid"  effect="dark" >会员统计</el-tag>
         
        <div style="font-size: small;">
           今日新增会员：<span>{{ data.todayAddMember }}</span>
           <el-divider></el-divider>
        </div>

        <div style="font-size: small;">
           今日登陆会员：<span>{{ data.todayLoginMember }}</span>
           <el-divider></el-divider>
        </div>
       
        <div style="font-size: small;">
           会员总数：<span>{{ data.memberSum }}</span>
           <el-divider></el-divider>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
    </div>

    <el-card shadow="always" style="width: 100%;height: 220px;margin-top: 2%;">
            <el-tag style="width: 100%;" class="el-icon-star-off"   effect="dark" >健康系统功能一览</el-tag>
            <el-row type="flex" justify="space-between " align="bottom" style="margin-top: 3%;">
                <el-col :span="1">
                    <img src="
https://imgag.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230215160801.png" alt="" style="width: 50px;height: 50px;cursor:pointer;">
                    <br>
                    <span style="font-size: 12px;;">新建档案</span>
                </el-col>
                <el-col :span="1"><i class="el-icon-d-arrow-right" style="width: 50px;height: 50px;"></i></el-col>

                <el-col :span="1">
                    <img src="https://imgag.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230215160845.png" alt="" style="width: 50px;height: 50px;cursor:pointer;">
                    <br>
                    <span style="font-size: 12px;;">会员管理</span>
                </el-col>
                <el-col :span="1"><i class="el-icon-d-arrow-right" style="width: 50px;height: 50px;"></i></el-col>

                <el-col :span="1">
                    <img src="https://imgag.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230215160850.png" alt="" style="width: 50px;height: 50px;cursor:pointer;">
                    <br>
                    <span style="font-size: 12px;;">体检上传</span>
                </el-col>
                <el-col :span="1"><i class="el-icon-d-arrow-right" style="width: 50px;height: 50px;"></i></el-col>

                <el-col :span="1">
                    <img src="https://imgag.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230215160856.png" alt="" style="width: 50px;height: 50px;cursor:pointer;">
                    <br>
                    <span style="font-size: 12px;;">健康评估</span>
                </el-col>
                <el-col :span="1"><i class="el-icon-d-arrow-right" style="width: 50px;height: 50px;"></i></el-col>

                <el-col :span="1">
                    <img src="https://imgag.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230215160903.png" alt="" style="width: 50px;height: 50px;cursor:pointer;">
                    <br>
                    <span style="font-size: 12px;;">人群分类</span>
                </el-col>
                <el-col :span="1"><i class="el-icon-d-arrow-right" style="width: 50px;height: 50px;"></i></el-col>

                <el-col :span="1">
                    <img src="https://imgag.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230215160908.png" alt="" style="width: 50px;height: 50px;cursor:pointer;">
                    <br>
                    <span style="font-size: 12px;;">健康干预</span>
                </el-col>
                <el-col :span="1"><i class="el-icon-d-arrow-right" style="width: 50px;height: 50px;"></i></el-col>

                <el-col :span="1">
                    <img src="https://imgag.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230215160913.png" alt="" style="width: 50px;height: 50px;cursor:pointer;">
                    <br>
                    <span style="font-size: 12px;;">干预追踪</span>
                </el-col>
                <el-col :span="1"><i class="el-icon-d-arrow-right" style="width: 50px;height: 50px;"></i></el-col>

                <el-col :span="1">
                    <img src="https://imgag.oss-cn-hangzhou.aliyuncs.com/img/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230215160919.png" alt="" style="width: 50px;height: 50px;cursor:pointer;">
                    <br>
                    <span style="font-size: 12px;;">效果评估</span>
                </el-col>
            </el-row>
        </el-card>
  </div>
</template>

<script>
import { Loading } from 'element-ui';
export default {
data () {
    return {
        activeNames: ['1'],
        bookingsum:56,
        data:{},

    }
},
created () {
  const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 2000);
  this.queryAllData()
},
methods: {
      handleChange(val) {
        console.log(val);
      },
      queryAllData(){
        this.axios.post("/api/lzh/queryAllData").then(result=>{
          console.log(result.data)
            this.data=result.data
      
        })
      }

    }
}
</script>

<style>

</style>